<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="pageTitle">详情页</title>

    <script src="/js/axios.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/utils/request.js"></script>
    <script src="/js/jquery/jquery.js"></script>
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

    <!-- 引入elment-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/banner.css"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">


    <style type="text/css">
        #show {
            width: 1000px;
            align-items: center;
            margin: 0px auto;
        }
        #title {
            height: 50px;
            text-align: left;
            color: #25A5F7;
            font-size: 30px;
            margin-top: 20px;
        }
        #content {
            text-align: left;

        }
        .CollectSpan1 {
            height: 40px;
            color: #25A5F7;
            font-size: 24px;
        }
        .CollectSpan2 {
            height: 40px;
            color: #25A5F7;
            font-size: 26px;
        }
        .input{
            border: 0;
            outline: none;
            padding:16px 16px 23px;
            width: 96.2%;
            height: 100px;
            background-color: #F5F5F6;;
            border-radius:20px;
            resize: none;
        }
        em {
            color: red;
            font-style: normal;
        }
        a{
            color:  #FF8800;
        }
        a:hover {
            color: #25A5F7;
        }
        #headText{
            float:right;
            font-size:16px;
            color: #FF8800;
            text-align: center;
            margin-left: 5px;
            line-height: 40px;
        }
        #headText:hover{
            color: #25A5F7;
        }
        .block {
            height: 40px;
        }
        #content_editor_container {
            width: 100%;
        }
        .line-50 {
            line-height: 50px;
        }
        .margin-10 {
            margin-left: 10px;
        }
        .font-5 {
            font-size: 12px;
            width: 90px;
        }
        .font-10 {
            margin-left: 3px;
            font-size: 10px;
        }
        .font-15 {
            font-size: 18px;
        }
        .lv-span {
            border-radius: 4px;
            padding: 2px;
        }
        .lv-span2 {
            border-radius: 4px;
            line-height: 18px;
            margin: 1px 0 3px 3px;
            height: 18px;
        }
        .lv-span3 {
            border-radius: 4px;
            line-height: 22px;
            width: 110px;
            height: 22px;
        }
        .icon-padding {
            padding: 10px 0 10px 0;
        }
        .lv1-color {
            background-image:linear-gradient(120deg,#84fab0 0%, #8fd3f4 100%);
            color: #ffffff;
            font-weight: bolder;
        }
        .lv5-color {
            background-image:linear-gradient(-22deg,#0acffe 0%, #495aff 100%);
            color: #ffffff;
            font-weight: bolder;
        }
        .lv10-color {
            /*background-image:linear-gradient(120deg,#f6d365 0%, #fda085 100%);*/
            background-image:linear-gradient(-20deg,#fc6076 0%, #ff9a44 100%);
            color: whitesmoke;
            font-weight: bolder;
        }
        .lv15-color {
            background-image:linear-gradient(-40deg,#00dbde 45%, #fc00ff 100%);
            color: floralwhite;
            font-weight: bolder;
        }
        .gly-color {
            padding: 0px;
            background-image:linear-gradient(0deg,#f83600 0%, #f9d423 100%);
            color: #FFFEFF;
        }
        .sonReviews_Div {
            float:right;
            text-align: left;
            width: 94.8%;
            margin-top: 5px;
        }
        .center-show-level {
            display: flex;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="width: 70%;margin: auto;">
        <div class="banner" style="height: 40px;width: 100%!important;">
            <div class="logo">
                <img src="/img/icon/heima.png" alt="1"/>
                <span>
                      <div class="logo-ch">龙云论坛</div>
                      <div class="logo-en">www.longyun.com</div>
                    </span>
            </div>
            <div>
                <span style="float:left;text-align: center;line-height: 70px;margin-right: 15px;cursor: pointer;">
                        <div v-if="this.userInfo.userId == ''">
                            <span class="demo-basic--circle" style="text-align: center;line-height: 70px">
                                <div @click="dialogVisible = true" class="block"><el-avatar size="large">登 录</el-avatar></div>
                            </span>
                        </div>
                        <div v-if="this.userInfo.userId != ''">
                             <el-dropdown size="small" placement="bottom">
                                <span class="el-dropdown-link">
                                    <div style="float: left">
                                        <span class="demo-basic--circle" style="float: left;text-align: center;line-height: 70px">
                                            <div class="block" v-if="userInfo.headPortrait">
                                                <el-avatar size="large" fit="scale-down" :src=this.userInfo.headPortrait></el-avatar>
                                            </div>
                                            <div class="block" v-else>
                                                <el-avatar size="large" fit="scale-down" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                                            </div>
                                        </span>
                                    </div>
                                    <div id="headText" style="">{{this.userInfo.userName}}</div>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item><div style="text-align: center"></div></el-dropdown-item>
                                    <el-dropdown-item><span @click="">个人主页</span></el-dropdown-item>
                                    <el-dropdown-item><span @click="">账户设置</span></el-dropdown-item>
                                    <el-dropdown-item><span @click="logout()">退出登录</span></el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                </span>
                <span style="text-align: center;line-height: 40px;margin-right: 15px">
                     <a href="/index.html"><i class="el-icon-s-home">&nbsp首页</i></a>
                </span>
                <span style="text-align: center;line-height: 40px;margin-right: 15px">
                    <a href="/forum/setting"><i class="el-icon-s-tools">&nbsp设置</i></a>
                </span>
                <span style="text-align: center;line-height: 40px;margin-right: 15px;">
                        <a href="/forum/getEdit" target="_blank"><i class="el-icon-circle-plus">&nbsp发布</i></a>
                </span>
            </div>
        </div>
        <div style="height: 10px"></div>
        <div id="show">
            <div id="head">
                <div id="title" style="height: auto">{{post.title}}</div>
            </div>
            <div style="text-align: left;margin-bottom: 30px">
                <div style="float: left;text-align: center;line-height: 25px;">
                    <font style="font-size: 13px;color: #999999"><i class="el-icon-user"></i></font>
                    <font style="font-size: 13px;color:#999999">{{post.userName}}&nbsp&nbsp&nbsp&nbsp</font>
                    <font style="font-size: 13px;color: #999999"><i class="el-icon-view"></i></font>
                    <font style="font-size: 13px;color:#999999">{{post.pageView}}</font>
                </div>
                <div style="float: right">
                    <font style="font-size: 13px;color: #999999">&nbsp&nbsp于&nbsp{{post.timeStr}}&nbsp发布</font>
                </div>
            </div>
            <div id="content_editor_container"></div>
            <el-skeleton :row="10" :loading="loading" animated>
                <el-divider></el-divider>
                <div style="height: 50px">
                    <div class="demo-basic--circle" style="float:left; text-align: center;height: 50px;margin-bottom: 10px">
                        <div style="float:left;" class="block"><el-avatar :size="50" :src="post.headPortrait"></el-avatar></div>
                        <div style="float:right;display: flex;">
                            <div class="line-50 margin-10 font-15">{{post.userName}}</div>
                            <div class="line-50 font-10" @click="toShowLevel()">
                                <div v-if="post.level < 5">
                                    <span class="lv-span lv1-color">{{post.levelStr}}</span>
                                </div>
                                <div v-if="5 <= post.level && post.level < 10">
                                    <span class="lv-span lv5-color">{{post.levelStr}}</span>
                                </div>
                                <div v-if="10 <= post.level && post.level <= 15">
                                    <span class="lv-span lv10-color">{{post.levelStr}}</span>
                                </div>
                                <div v-if="post.level > 15">
                                    <span class="lv-span lv15-color">{{post.levelStr}}</span>
                                </div>
                            </div>
                            <div class="line-50 font-10">
                                <span class="lv-span gly-color">龙云管理员</span>
                            </div>
                            <div class="line-50 margin-10">
                                <div v-if="post.attention == '0'">
                                    <el-button size="mini" type="success" plain round @click="attentionToThis()">关注</el-button>
                                </div>
                                <div v-if="post.attention == '1'">
                                    <el-button size="mini" plain round @click="noAttentionToThis()">已关注</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="line-50" style="float: right;height: 50px;display: flex">
                        <div class="icon-padding" style="height: 30px;margin: 0 auto;" @click="giveToThis('P')">
                            <div style="float:left; margin-bottom: 0px;width: 24px;height: 24px">
                                <img id="approvalImg" style="" height="28px" width="28px" src="/img/icon/width.png" >
                            </div>
                            <div style="float:right;margin-top: 5px;margin-left:3px;font-size:20px;color:#25A5F7;line-height: 25px;height: 25px">{{post.approval}}</div>
                        </div>
                        <div class="icon-padding" style="height: 30px;display: flex" @click="collectToThis()">
                            <div id="CollectSpan" class="CollectSpan1" style="float:left;margin-bottom: 0px;width: 24px;height: 24px">
                                <img id="isCollect" style="margin-bottom: 3px" height="28px" width="28px" src="/img/icon/collect_null.png">
                            </div>
                            <div style="float:right;margin-top: 5px;margin-left:3px;font-size:20px;color:#25A5F7;line-height: 25px;height: 25px">{{post.collect}}</div>
                        </div>
                    </div>
                </div>
            </el-skeleton>
            <div id="review">
                <div style="margin-top: 20px;margin-bottom: 20px">
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="为该主体贴送上您的暖心评论"
                            v-model="textarea"
                            maxlength="300"
                            show-word-limit
                    >
                    </el-input>
                </div>
                <div style="text-align: center;">
                    <el-button type="primary" icon="el-icon-check" @click="submitReview('P','','0')" round>提交</el-button>
                </div>
                <div style="text-align: left">
                    评论
                    <el-badge :value="post.review" class="item" type="primary">
                        <i class="el-icon-arrow-right"></i>
                    </el-badge>
                </div>
                <div style="height: 20px"></div>
                <div v-if="this.reviewList != ''">
                    <div style="width: 100%" v-for="(reviews,index) in reviewList" :key="index">
                        <div>
                            <div style="float:left; text-align: left;width: 6%" class="block">
                                <img style="width: 50px;height: 50px;border-radius: 25px;"  :src="reviews.headPortrait">
                            </div>
                            <div style="float:right; text-align: left; width: 94%">
                                <div style="margin-bottom: 10px;display: flex">
                                    <div>
                                        <font style="font-weight: bold" size="2px">{{reviews.userName}}</font>
                                    </div>
                                    <div class="font-5" @click="toShowLevel()">
                                        <div v-if="reviews.level < 5" class="lv-span2 lv1-color">
                                            {{reviews.levelStr}}
                                        </div>
                                        <div v-if="5 <= reviews.level && reviews.level < 10" class="lv-span2 lv5-color">
                                            {{reviews.levelStr}}
                                        </div>
                                        <div v-if="10 <= reviews.level && reviews.level <= 15" class="lv-span2 lv10-color">
                                            {{reviews.levelStr}}
                                        </div>
                                        <div v-if="reviews.level > 15" class="lv-span2 lv15-color">
                                            {{reviews.levelStr}}
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-bottom: 10px"><font size="3px">{{reviews.review}}</font></div>
                                <div style="margin-bottom: 20px; height: 15px">
                                    <span style="float: left"><font size="1px">{{reviews.timeStr}}</font></span>
                                    <span style="float: right">
                                        <span style="float:left;" @click="toReview(reviews.id)">
                                            <font size="3px" color="#25A5F7"><i class="el-icon-chat-dot-square"></i></font>&nbsp;
                                        <font size="2px" color="#25A5F7">回复&nbsp;&nbsp;</font>
                                        </span>
                                        <span style="float:right;" @click="giveToThis(reviews.id)">
                                            <span style="float:left;margin-bottom: 4px;width: 25px"><img :id="reviews.id" height="20px" width="20px" src="/img/icon/width.png" alt></span>
                                            <span style="float:right;margin-top: 5px;font-size:15px;color:#25A5F7;line-height: 10px;height: 10px">{{reviews.reviewApproval}}</span>
                                        </span>
                                    </span>
                                </div>
                                <div :id="getDivID(reviews.id)" class="reviewDiv" style="display: none;">
                                    <textarea maxlength="300" @keyup="monitorMaxFont()" class="input" v-model="params.review" :placeholder="getPlaceholder(reviews.userName)" ></textarea>
                                    <div style="float:right; margin-bottom: 10px;margin-right: 5px">
                                        <span class="showMaxFontSize"></span>
                                        <el-button type="primary" @click="submitReview('R',reviews.id,reviews.id)" size="small" round>发表</el-button>
                                    </div>
                                </div>

                                <div style="overflow: hidden;width: 100%;" v-for="(sonReviews,index2) in reviews.sonReviewList" :key="index2">
                                    <div>
                                        <div style="float:left;text-align: left;">
                                            <img style="margin-top:5px;width: 42px;height: 42px;border-radius: 25px;" :src="sonReviews.headPortrait">
                                        </div>
                                        <div class="sonReviews_Div">
                                            <div style="margin-bottom: 10px;display: flex">
                                                <div>
                                                    <font style="font-weight: bold;" size="2px">
                                                        {{sonReviews.userName}}
                                                    </font>
                                                </div>
                                                <div class="font-5" @click="toShowLevel()">
                                                    <div v-if="sonReviews.level < 5" class="lv-span2 lv1-color">
                                                        {{reviews.levelStr}}
                                                    </div>
                                                    <div v-if="5 <= sonReviews.level && sonReviews.level < 10" class="lv-span2 lv1-color">
                                                        {{sonReviews.levelStr}}
                                                    </div>
                                                    <div v-if="10 <= sonReviews.level && sonReviews.level <= 15" class="lv-span2 lv10-color">
                                                        <font>{{sonReviews.levelStr}}</font>
                                                    </div>
                                                    <div v-if="sonReviews.level > 15" class="lv-span2 lv15-color">
                                                        {{sonReviews.levelStr}}
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="margin-bottom: 10px">
                                                <font size="3px">
                                                    <span v-if="sonReviews.answerId == sonReviews.parentId">
                                                        {{sonReviews.review}}
                                                    </span>
                                                    <span v-else>
                                                        {{sonReviews.review}}&nbsp;// <a style="color: #25A5F7;text-decoration:none; " target="_blank" :href="getUserHomePage(sonReviews.parentUserId)"> @ {{sonReviews.parentUserName}} </a>&nbsp;: {{sonReviews.parentReview}}
                                                    </span>
                                                </font>
                                            </div>
                                            <div style="margin-bottom: 20px;height: 15px">
                                                <span style="float: left"><font size="1px">{{sonReviews.timeStr}}</font></span>
                                                <span style="float: right">
                                                    <span style="float:left;" @click="toReview(sonReviews.id)">
                                                        <font size="3px" color="#25A5F7"><i class="el-icon-chat-dot-square"></i></font>&nbsp;<font size="2px" color="#25A5F7">回复&nbsp;&nbsp;</font>
                                                    </span>
                                                    <span style="float:right;" @click="giveToThis(sonReviews.id)">
                                                        <span style="float:left;margin-bottom: 4px;width: 25px"><img :id="sonReviews.id" height="20px" width="20px" src="/img/icon/width.png" alt></span>
                                                        <span style="float:right;margin-top: 5px;font-size:15px;color:#25A5F7;line-height: 10px;height: 10px">{{sonReviews.reviewApproval}}</span>
                                                    </span>
                                                </span>
                                            </div>

                                            <div :id="getDivID(sonReviews.id)"  class="reviewDiv" style="display: none;width: 100%">
                                                <textarea maxlength="300" @keyup="monitorMaxFont()" class="input" v-model="params.review" :placeholder="getPlaceholder(sonReviews.userName)"></textarea>
                                                <div style="float:right; margin-bottom: 10px;margin-right: 5px">
                                                    <span class="showMaxFontSize"></span>
                                                    <el-button type="primary" @click="submitReview('R',sonReviews.id,reviews.id)" size="small" round>发表</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>
                    </div>
                    <el-divider content-position="center">触碰到了我滴底线</el-divider>
                </div>
                <div v-if="this.reviewList == ''">
                    <el-empty :image-size="100" description="快来抢沙发吧"></el-empty>
                </div>
            </div>
        </div>

        <div>
            <el-dialog
                    custom-class="customClass"
                    center
                    title="replace"
                    :visible.sync="dialogVisible"
                    width="40%">
                <template slot='title'>
                    <span>
                      <div class="logo-ch" style="margin-bottom: 10px"><font style="color: #FF8800;font-size:35px;font-weight:700">龙云论坛</font></div>
                      <div class="logo-en"><font style="font-size:20px;color: #999999">www.longyun.com</font> </div>
                    </span>
                </template>
                <div class="digTop">
                    <el-tabs v-model="activeName" type="card" >
                        <el-tab-pane label="登录" name="login">
                            <div id="head1" style="width: 50%;margin: 0 auto;">
                                <el-form ref="form1" :model="form" label-width="80px" :rules="rules">
                                    <el-form-item label="用户账号" prop="userAccount">
                                        <el-input v-model="form.userAccount" placeholder="请输入您的账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="password">
                                        <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div style="margin: 0 auto;text-align: center">
                                    <el-button type="success" plain @click="login">立即登录</el-button>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="注册" name="second">
                            <div style="width: 50%;margin: 0 auto;">
                                <el-form ref="form2" :model="user" label-width="80px" status-icon :rules="rules">
                                    <el-form-item label="用户账号" prop="userAccount">
                                        <el-input v-model="user.userAccount" placeholder="请输入您的账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="昵称" prop="userName">
                                        <el-input v-model="user.userName" placeholder="请填写昵称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="password">
                                        <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="确认密码" prop="checkPass">
                                        <el-input v-model="user.checkPass" show-password placeholder="请再次输入密码"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div style="margin: 0 auto;text-align: center">
                                    <el-button type="success" plain @click="register">立即注册</el-button>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-dialog>
        </div>


        <div>
            <el-dialog
                    custom-class="customClass"
                    center
                    title="replace"
                    :visible.sync="dialogVisible2"
                    width="35%">
                <template slot='title'>
                    <span>
                      <div class="logo-en"><font style="font-size:20px;font-weight:bolder;color: #999999">龙云论坛等级规则说明</font> </div>
                    </span>
                </template>
                <div class="digTop">
                    <div class="center-show-level" align="center">
                        <div style="width: 300px;font-weight: bolder;font-size: 15px">论坛等级</div>
                        <div style="width: 300px;font-weight: bolder;font-size: 15px">所需要经验值</div>
                    </div>
                    <div class="center-show-level" align="center" v-for="(level,index) in levelList" :key="index">
                        <div style="width: 300px;margin-top: 10px">
                            <div v-if="index < 5" class="lv-span3 lv1-color">{{level.codeId}} {{level.codeValue}}</div>
                            <div v-if="5 <= index && index < 10"  class="lv-span3 lv5-color">{{level.codeId}} {{level.codeValue}}</div>
                            <div v-if="10 <= index && index < 15" class="lv-span3 lv10-color">{{level.codeId}} {{level.codeValue}}</div>
                            <div v-if="15 <= index && index <20" class="lv-span3 lv15-color">{{level.codeId}} {{level.codeValue}}</div>
                        </div>
                        <div style="width: 300px;margin-top: 10px">{{level.codeCondition}}</div>
                    </div>
                </div>
            </el-dialog>
        </div>


    </div>
</div>

<script>
    // 设置后台服务地址
    axios.defaults.baseURL = "http://192.168.2.188:8089";
    axios.defaults.timeout = 3000;

    let app = new Vue({
            el: "#app",
    data() {
        var editor;
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.user.checkPass !== '') {
                    this.$refs.user.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.user.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            form: {
                userAccount: "",
                userName: "",
                password: "",
            }, // 登录表单
            user: {
                userAccount: "",
                userName: "", // post请求内容
                password: "",
                checkPass: "",
            },
            userInfo: {
                userId: "",
                userName: "", // 用户信息
                headPortrait: "",
            },
            activeName: 'login',
            dialogVisible: false,
            dialogVisible2: false,
            post: {

            },// 帖子数据
            reviewList: [],// 评论
            levelList: [], // 等级详情
            textarea: "",
            isApproval: "0", //点赞标记
            isCollect: "0", // 收藏标记
            isAttention: "0", //关注标记
            loading:true,
            thisBlockDiv:"",// 当前显示状态的评论div的id
            params: {
                review:""
            },
            rules: {
                userAccount: [
                    {required: true, message: "账号不能为空", trigger: "blur"}
                ],
                password: [
                    {required: true, message: "密码不能为空", trigger: "blur"}
                ],
                userName: [
                    {required: true, message: "请填写一个昵称", trigger: "blur"}
                ],
                password: [
                    {validator: validatePass, trigger: 'blur'}
                ],
                checkPass: [
                    {validator: validatePass2, trigger: 'blur'}
                ]
            },
        }
    },
        methods: {
            getDivID(index){
                return "div"+index;
            },
            getPlaceholder(name){
                return "回复 "+name + ":";
            },
            // 登录
            login() {
                if(this.form.userAccount == ''){
                    this.$message({
                        message: '请输入用户账号！',
                        type: 'warning'
                    });
                    return;
                }
                if(this.form.password == ''){
                    this.$message({
                        message: '请输入密码！',
                        type: 'warning'
                    });
                    return;
                }
                axios.post("/user/login", this.form)
                    .then(data => {
                        if (data.data.success) {
                            this.$message({
                                message: '登录成功！',
                                type: 'success'
                            });
                            this.dialogVisible = false;
                            this.form = {};
                            //全局存储token
                            localStorage.setItem("token",data.data.data.jwt);
                            this.userInfo.userId = data.data.data.id;
                            this.userInfo.userName = data.data.data.userName;
                            this.userInfo.headPortrait = data.data.data.headPortrait;
                        } else {
                            this.$message.error('登录失败，' + data.data.errorMsg);
                        }
                    }).catch(e => {
                    this.$message.error('登录失败，请检查网络！');
                });
            },
            // 注册
            register() {
                if(this.user.userAccount == '' || this.user.userName == '' || this.user.password == '' || this.user.checkPass == ''){
                    this.$message({
                        message: '请填写完整表单信息',
                        type: 'warning'
                    });
                    return;
                }
                if( this.user.password != this.user.checkPass){
                    this.$message({
                        message: '两次输入密码不一致！',
                        type: 'warning'
                    });
                    return;
                }
                axios.post("/user/register", this.user)
                    .then(data => {
                        if (data.data.success) {
                            this.$message({
                                message: '注册成功,请进行登录！',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('注册失败，' + data.data.errorMsg);
                        }
                    }).catch(e => {
                    this.post = []
                });
            },
            // 退出登录
            logout() {
                instance.post("/user/logout")
                    .then(data => {
                        if (data.data.success) {
                            this.$message({
                                message: '退出登录成功！',
                                type: 'success'
                            });
                            this.dialogVisible = false;
                            this.form = {};
                            // 删除token
                            localStorage.removeItem("token");
                            this.getUserInfo();
                        } else {
                            this.$message.error('退出登录失败，' + data.data.errorMsg);
                        }
                    }).catch(e => {
                    this.$message.error('退出失败，请检查网络！');
                });
            },
            // 获取用户信息
            getUserInfo() {
                instance.get("/user/getUserInfo",)
                    .then(data => {
                        if (data.data.success) {
                            this.dialogVisible = false;
                            this.userInfo = data.data.data;
                            this.userInfo.userId = data.data.data.id;
                            //刷新token
                            localStorage.setItem("token",data.data.data.jwt);
                        } else{
                            if(data.data.errorCode === 20012){
                                this.toLogin();
                                return;
                            } else{
                                if(data.data.errorCode != 2001){
                                    this.$message({
                                        type: 'error',
                                        message: '错误：'+ data.data.errorMsg
                                    });
                                }
                            }
                            this.userInfo = {
                                userId:"",
                                userName: "", // 用户信息
                                headPortrait:"",
                            }
                        }
                    }).catch(e => {
                        this.userInfo = {
                            userId:"",
                            userName: "", // 用户信息
                            headPortrait:"",
                        }
                });
            },
            // 搜索帖子数据
            getPost() {
                var URL = window.location.href; //获取url
                var id = URL.substring(URL.lastIndexOf("/")+1,URL.indexOf("?"));
                instance.get("/forum/getPost/"+id)
                    .then(data => {
                        if(data.data.success){
                            this.post = data.data.data;
                            $('#pageTitle').html(this.post.title);
                            this.loading = false;
                            editor.setHtml(this.post.contentHtml);
                        } else{
                            this.$message({
                                message: data.data.errorMsg,
                                type: 'error'
                            });
                        }
                    }).catch(e => {
                    this.post = []
                });
            },
            getReviewList(){
                var URL =  window.location.href;//获取url
                var id = URL.substring(URL.lastIndexOf("/")+1,URL.indexOf("?"));
                instance.get("/forum/getReviewList/"+id)
                    .then(data => {
                        this.reviewList = data.data.data;
                        this.post.review = this.reviewList.length;
                    }).catch(e => {
                    this.reviewList = []
                });
            },
            // 点赞
            giveToThis(flag){
                if(flag === 'P'){
                    // 点赞主题帖
                    var imgSrc = document.getElementById("approvalImg");
                    if(this.isApproval == '0'){
                        this.isApproval = "1";
                        imgSrc.src = "/img/icon/block.png";
                        this.$message({
                            message: '已点赞！',
                            type: 'success'
                        });
                    } else{
                        // 取消点赞
                        this.isApproval = "0";
                        imgSrc.src = "/img/icon/width.png";
                        this.$message('取消点赞！');
                    }
                    return;
                }
                var imgSrc = document.getElementById(flag);
                var img = imgSrc.src.substring(imgSrc.src.length - 9,imgSrc.src.length);
                if(img == 'width.png'){
                    imgSrc.src = "/img/icon/block.png";
                    this.$message({
                        message: '已点赞！',
                        type: 'success'
                    });
                } else{
                    // 取消点赞
                    imgSrc.src = "/img/icon/width.png";
                    this.$message('取消点赞！');
                }
            },
            //收藏
            collectToThis(){
                if(this.isCollect == "0"){
                    document.getElementById("isCollect").src = "/img/icon/collect.png";
                    /*document.getElementById("CollectSpan").setAttribute("class","CollectSpan2");*/
                    this.isCollect = "1";
                    this.$message({
                        message: '收藏成功！',
                        type: 'success'
                    });
                } else if(this.isCollect == "1"){
                    document.getElementById("isCollect").src = "/img/icon/collect_null.png";
                    // document.getElementById("isCollect").setAttribute("class","el-icon-star-off");
                    // document.getElementById("CollectSpan").setAttribute("class","CollectSpan1");
                    this.isCollect = "0";
                    this.$message('取消收藏！');
                }
            },
            // 取消关注
            noAttentionToThis(){
                this.$confirm('是否要取消关注用户<font color="green">'+this.post.userName+'</font>?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '取消关注成功!'
                    });
                    this.post.attention = "0";
                }).catch((e) => {
                    this.$message({
                        type: 'info',
                        message: '已取消!'
                    });
                });
            },
            // 关注
            attentionToThis(){
                this.post.attention = "1";
            },
            // 渲染回复div
            toReview(index){
                this.params.review = '';
                var divID = "div"+index;
                var show = $('#'+divID).css('display');
                if(show == 'none'){
                    if(this.thisBlockDiv != divID){
                        $('#'+this.thisBlockDiv).css('display','none');
                    }
                    $('#'+divID).css('display','block');
                    // 记录已经显示的div的id
                    this.thisBlockDiv = divID;
                } else{
                    if(this.thisBlockDiv == divID){
                        $('#'+divID).css('display','none');
                    } else{
                        // 隐藏上一个div，并显示当前div
                        $('#'+this.thisBlockDiv).css('display','none');
                        $('#'+divID).css('display','block');
                        // 记录已经显示的div的id
                        this.thisBlockDiv = divID;
                    }
                }
                this.monitorMaxFont();
            },
            // 监听可输入字数
            monitorMaxFont(){
                if(this.params.review.length == 300) {
                    var html = '<font size="2px" color="red">已达到最大限制字数&nbsp;</font>'
                    $('.showMaxFontSize').html(html);
                } else{
                    var number = 300 - this.params.review.length;
                    var html = '<font size="2px">还可以输入&nbsp;<font color="green">'+number+'&nbsp;</font>字&nbsp;</font>'
                    $('.showMaxFontSize').html(html);
                }
            },
            // 评论
            submitReview(flag,answerId,parentId){
                var id = this.post.id;
                this.params.postId = Number(id);
                // 评论主题帖
                if(flag == 'P'){
                    if(this.textarea.trim() == ''){
                        this.$message({
                            message: '内容不能为空！',
                            type: 'warning'
                        });
                        return;
                    }
                    this.params.review = this.textarea;
                    this.params.answerId = 0;
                    this.params.parentId = 0;
                }
                // 回复
                if(flag == 'R'){
                    if(this.params.review.trim() == ''){
                        this.$message({
                            message: '内容不能为空！',
                            type: 'warning'
                        });
                        return;
                    }
                    this.params.answerId = answerId;
                    this.params.parentId = parentId;
                }
                instance.post("/forum/submitReview",this.params)
                    .then(data => {
                        if(data.data.code == '401'){
                            this.$alert('请先登录后评论', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.dialogVisible = true;
                                }
                            });
                            return;
                        }
                        if(data.data.success){
                            this.$message({
                                type: 'success',
                                message: data.data.errorMsg,
                            });
                            this.textarea = '';
                            $('#div'+answerId).css('display','none');
                            this.getReviewList();
                        } else{
                            this.$message.error('评论失败！'+data.data.errorMsg);
                        }
                    }).catch(e => {
                    this.$message.error('评论失败！请检查网络设置或联系客服处理！');
                });
            },
            // 获取等级信息list
            getLevelList() {
                instance.get("/forum/getLevelList")
                    .then(data => {
                        this.levelList = data.data.data;
                    }).catch(e => {
                    this.levelList = [];
                });
            },
            // 跳转至用户主页
            getUserHomePage(id){
                var randomNum1 = Math.floor(Math.random() * 100000) - 5;
                var randomNum2 = Math.floor(Math.random() * 100231230) + 32;
                return "/userInfo/personalHomepage/info/" + randomNum1 + "/" + id + "?uid_page=home&su="+randomNum2
            },

            toLogin() {
                this.$confirm('登录信息已过期，是否重新登录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible = true;
                    return;
                }).catch(() => {
                    return;
                });
            },

            // 展示等级详情模态框
            toShowLevel() {
                this.dialogVisible2 = true;
            }
        },

        mounted() {
            this.getPost();
            this.getUserInfo();

            // 初始化帖子内容展示
            const { createEditor, createToolbar } = window.wangEditor
            const editorConfig = {
                //placeholder: 'Type here...',
                onChange(editor) {
                },
                readOnly:true, //只读
                scroll:false, //是否滚动
            }
            editor = createEditor({
                selector: '#content_editor_container',
                html: '',
                config: editorConfig,
                mode: 'default', // or 'simple'
            })

            this.getReviewList();
            this.getLevelList();
        }
    })



</script>

</body>
</html>